<template>
    <div>
        <ul class="hot-showing">
            <li v-for="item in nowList">
                <router-link :to="{name: 'detail', params: {'id': item.id}}">
                    <img :src="item.cover.origin" alt="">
                    <div class="hot-box">
                        <div class="htb-left">
                            <p class="hot-title">{{item.name}}</p>
                            <p class="hot-detail">{{item.cinemaCount}}家影院上映 {{item.watchCount}}人购票</p>
                        </div>
                        <div class="htb-right">{{item.grade}}</div>
                    </div>
                </router-link>
            </li>
        </ul>
        <div class="morem">更多热映电影</div>
    </div>
</template>

<script>
    import $ from 'jquery';

    export default {
        data: function() {
            return {
                nowList: []
            }
        },
        mounted: function() {

            var url = 'http://localhost:3000/now-playing?time=' + new Date().getTime();
            var that = this;
            $.get(url, function(res) {
                that.nowList = res.data.films
            })
        }
    }    
</script>
